<template>
    <div>
        <!--导航条-->
        <div id="Tabbar">
            <span id="span">
                <span class="fa fa-angle-left"></span>
                <span @click="backClick">返回</span>
            </span>
            <span>用户注册</span>
        </div>
        <img src="static/v7_logo.png" alt="">
        <!--注册主题-->
        <div id="regist">
            <input type="text" placeholder="手机号码" v-model="user.username">
            <div id="Sms">
                <input type="text" placeholder="短信验证码">
                <button>获得短信验证码</button>
            </div>
            <input type="text" placeholder="设置6-16位登录密码" @input="input" v-model="user.psw" >
            <button ref="regist" @click="click">立即注册</button>
            
                
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
export default {
    data:function(){
        return {
            user:{
                username:null,
                psw:null
            }
        }
    },
    computed:{
        ...mapState([
            "registalert"
        ])
    },
    methods:{
        backClick:function(){
            history.back();
        },
        input:function(e){
            if(e.target.value.length>=6){
                this.$refs.regist.style.backgroundColor = "#ee4000"
            }else{
                this.$refs.regist.style.backgroundColor = "#eee5de"
            }
        },
        click:function(){
            if(this.user.psw.length>=6){
                this.$store.dispatch("regist",this.user)
                .then(data=>{
                    this.layer.msg(this.registalert);
                    if(this.registalert=="注册成功"){
                        location.hash="/Myself"
                    }
                    this.user = {}
                })
            }else{
                this.layer.msg("密码格式不符")
            }
            
        }
    },
    
}
</script>

<style scoped>
    img{
        width: 70vw;
        margin-top: 5vh;
        margin-left: 15vw;
    }
    #Tabbar{
        height: 8vh;
        width: 100vw;
        background-color: black;
        color: white;
        font-size: 4.5vw;  
    }
    #Tabbar #span{
        line-height: 8vh;
        margin-left: 5vw;
        margin-right: 25vw;
    }
    #regist{
        margin-top: 3vh;
        padding-left: 10vw;
        font-size: 4vw;
    }
    #regist input{
        width: 80vw;
        height: 7vh;
        margin-top: 2vh;
        margin-bottom: 2vh;
        border:1px solid #dedede;
        color: grey;
        padding: 1vh 0 1vh 5vw;
        
    }
    #regist button{
        margin-top: 2vh;
        background-color: #eee5de;
        color: white;
        border-radius: 5px;
        border: none;
        width: 80vw;
        height: 8vh;
    }
    #regist #Sms input{
        width: 40vw;
        margin-right: 5vw;
    }
    #regist #Sms button{
        width: 35vw;
    }
</style>